<template>
  <div class="hld-container">
    <div class="hld-header">
      <div class="hld-header-left">
        <el-progress
          :percentage="((currentIndex+1) * 100) / total"
          :show-text="false"
          status="exception"
        ></el-progress>
      </div>
      <div class="hld-header-right">第{{ currentIndex + 1 }}/{{ total }}题</div>
    </div>
      <div class="hld-content">
        <transition :name="transitionName">
            <div v-show="transition">
              <div class="hld-content-title">{{currentIndex + 1}}.{{ item.tm }}</div>
              <div class="hld-content-answer-list">
                <div
                  class="hld-content-answer"
                  @click="checkAnswer(item, 1)"
                  :class="{ 'hld-active': item.checked == 1 }"
                >
                  是
                </div>
                <div
                  class="hld-content-answer"
                  @click="checkAnswer(item, 0)"
                  :class="{ 'hld-active': item.checked == 0 }"
                >
                  否
                </div>
              </div>
            </div>
          </transition>
      </div>
    <div class="hld-footer">
      <div class="hld-header-left" >
        <el-button plain type="info" v-show="currentIndex !== 0 " @click="preQues(item)">上一题</el-button>
      </div>
      <div class="hld-header-left" style="text-align: right;" >
        <el-button plain type="info" v-show="haveChioce > currentIndex" @click="nextQues(item)">下一题</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import hld from '../../api/index'
export default {
  name: 'hld',
  data() {
    return {
      transitionName: 'left',
      transition: true,
      currentIndex: 0,
      total: 1,
      haveChioce: 0,
      backFlag: false, // 是否处在返回按钮状态
      // 格式为: dn id tm xglx
      list: []
    };
  },

  components: {},
  computed:{
    item() {
      return this.list.length > 0 && this.list[this.currentIndex]
    },
    nextBtnFlag () {
      if (this.list.length> 0 && (this.list[this.currentIndex].checked === -1 || this.currentIndex + 1 === this.list.length)) {
        this.backFlag  = false
      } else {
        this.backFlag  = true
      }
      return this.backFlag 
    }
  },
  created() { 
    hld.getAllQuestion().then(res => {
      this.total = res.data.data.total
      this.list = res.data.data['records ']
    })
   
  },

  methods: {
    checkAnswer(item, index) {
      this.list.find((itemq, indexq) => {
        if (itemq.id == item.id) {
          itemq.checked = index
        }
      })
      // 跳转到下一题
      if (this.currentIndex == this.total - 1) {
        this.$confirm('请确认是否提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          // 跳转到结果页面
          let dataList = []
          for (let index in this.list) {
            let tempData = {
              questionId: this.list[index].id,
              answer: this.list[index].checked
            }
            dataList.push(tempData)
          }
          let data = {
            userId: '3',
            resultList: dataList
          }
          // 提交结果
          console.log(data)
          hld.submitHldTest(data).then(result => {
            console.log("result = ", result)
            // 跳转到结果页面
            this.$router.push({
              path: '/res',
              query: {
                recommendSubject: result.data.data.hldTestResult,
                resultCount: result.data.data.resultCountMap
              }
            })
          }).catch(err => {
            console.log(err);
          })
        }).catch(() => {
        });
      } else {
        setTimeout(() => {
          this.currentIndex++
        }, 300)
        this.transitionName = 'left'
        this.transition = false
        setTimeout(() => {
          this.transitionName = 'right'
          this.transition = true
          if (this.haveChioce <= this.currentIndex) {
            this.haveChioce++
          }
        }, 300)
      }
      
    },

    preQues(item) {
      if (this.currentIndex == 0) {
        return false
      }
      this.backFlag = true
      setTimeout(() => {
          this.currentIndex--
      }, 300)
      this.transitionName = 'right'
      this.transition = false
      setTimeout(() => {
        this.transitionName = 'left'
        this.transition = true
      },300)
    },

    nextQues(item) {
      if (this.currentIndex == this.list.length - 1) {
        return false
      }
      setTimeout(() => {
        this.currentIndex++
      }, 300)
      this.transitionName = 'left'
      this.transition = false
      setTimeout(() => {
        this.transitionName = 'right'
        this.transition = true
      },300)
    }
  }
}
</script>
<style scoped lang="less">
.hld-container {
  width: 100vw;
  height: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #eeeeee;
  
}
.hld-header {
  width: 73%;
  margin-top: 50px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 25px;
}

.hld-header-left {
  width: 50%;
}

.hld-header-left /deep/ .el-progress-bar__outer {
  background-color: #e3e8f3 !important;
}

.hld-content {
  width: 73%;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  .hld-content-title{
    // text-align: left;
  }
}

.hld-content-answer-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hld-content-answer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 12px;
  font-size: 32px;
  font-weight: bold;
  color: black;
  background-color: #fff;
  width: 100%;
  height: 95px;
}
.hld-content-answer:active {
  background-color: #f56c6c;
  color: #fff;
}
.hld-active {
  background-color: #f56c6c;
  color: #fff;
}
.hld-footer {
  margin-top: 50px;
  width: 73%;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
  font-size: 25px;
  >div {
    width: 90px;
  }
}
.hld-pre {
  background-color: #eee !important;
  color: #b3b3b3;
}


/* translate3d(x, y, z) 填正数往右平移，填负数，往左平移
         translate3d(-100%, 0, 0)向X轴平移， */

.left-enter-active {
    -webkit-animation: left-enter .3s ease-out both;
    animation: left-enter .3s ease-out both
}

.left-leave-active {
    -webkit-animation: left-leave .3s ease-in both;
    animation: left-leave .3s ease-in both
}

.right-enter-active {
    -webkit-animation: right-enter .3s ease-out both;
    animation: right-enter .3s ease-out both
}

.right-leave-active {
    -webkit-animation: right-leave .3s ease-in both;
    animation: right-leave .3s ease-in both
}
@-webkit-keyframes left-enter {
    0% {
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }
}
@keyframes left-enter {
    0% {
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }
}
@-webkit-keyframes left-leave {
    to {
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }
}
@keyframes left-leave {
    to {
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }
}

@-webkit-keyframes right-enter {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

@keyframes right-enter {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

@-webkit-keyframes right-leave {
    to {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

@keyframes right-leave {
    to {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

</style>